<template>
  <el-dialog title="添加角色" :visible.sync="formLabelAlign.roleAddFormVisible" @close="closeDialog">
    <el-form :label-position="labelPosition" label-width="80px" :model="addRoles" :rules="rules" ref="addRoles">
      <el-form-item label="角色名称" :label-width="formLabelWidth" prop="rName">
        <el-input v-model="addRoles.rName"></el-input>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth" prop="rDescription">
        <el-input v-model="addRoles.rDescription"></el-input>
      </el-form-item>
      <el-form-item label="网站角色" :label-width="formLabelWidth">
        <el-checkbox-group v-model="formLabelAlign.checkList" @change="changeCheckbox">
          <span v-for="item in formLabelAlign.roles" :key="item" style="margin-right:60px;">
            <el-checkbox :label="item"></el-checkbox>
          </span>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item class="form-bottom" :label-width="formLabelWidth">
        <el-button class="form-btn" @click="submitAdd('addRoles',addRoles)">添加角色</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {mapState, mapMutations, mapActions} from 'vuex'

export default {
  name: "RoleAdd",
  data() {
    return {
      labelPosition: 'right',
      formLabelWidth: '120px',
      rules: {
        rName:[{required: true, message: '请输入角色名称', trigger: 'blur'},
          {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}],
        rDescription:[{required: true, message: '备注不能为空', trigger: 'blur'},
          {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}]
      }
    }
  },
  computed: {
    ...mapState('roles', ['addRoles', 'formLabelAlign'])
  },
  methods: {
    ...mapActions('roles',['addRoleInfo']),
    ...mapMutations('roles', ['closeDialog', 'changeCheckbox']),

    //提交表单验证
    submitAdd(addRoles,obj){
      this.$refs[addRoles].validate((valid) => {
        if (valid) {
          this.addRoleInfo(obj)
        } else {
          return false;
        }
      })
    }
  }
}
</script>

<style scoped>
.rm {
  margin-left: 30px;
}

.form-btn {
  background-color: #1ab394;
  border-color: #1ab394;
  color: #FFF;
}

.form-bottom {
  padding: 20px 0;
  border-top: 1px dashed #beb8b8;
}
</style>